<template class="task-template">
  <section id="abp-cli-new-section" class="section js-section u-category-abp-cli">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
          Abp CLI: <code>new</code>
        </h1>
        <h3>Generate a new solution based on the ABP startup templates.</h3>
        <p>See the <a href="https://docs.abp.io/en/abp/latest/CLI#new">ABP framework documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser for more informations.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create an app solution
          <div class="demo-meta u-avoid-clicks">Generate a new app solution through the startup template</div>
        </button>
        <div id="box-abp-cli-new-app" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp new &lt;solution-name&gt; [options]</code></pre>
          <div id="app-project-info">
            <h5>Solution Name</h5>
            <input id="app-solution-name" class="demo-input" type="text" />
            <p id="app-solution-name-desc">Common convention is to name a solution is like YourCompany.YourProject. However, you can use different naming like YourProject (single level namespacing) or YourCompany.YourProduct.YourModule (three levels namespacing).</p>

            <h5>Output Folder</h5>
            <input id="app-project-folder" class="demo-input" type="text" />
            <button id="app-project-folder-selectBtn" class="demo-button">Select</button>
            <p id="app-project-folder-desc">Specifies the output folder. Default value is the current directory.</p>
          </div>

          <div id="app-options-ui">
            <h5>UI Framework</h5>
            <div>
              <div>
                <input name="app-ui" type="radio" id="app-ui-mvc" value="mvc" checked />
                <label>MVC</label>
              </div>
              <div>
                <input name="app-ui" type="radio" id="app-ui-angular" value="angular" />
                <label>Angular</label>
              </div>
              <div>
                <input name="app-ui" type="radio" id="app-ui-none" value="none" />
                <label>No-UI</label>
              </div>
            </div>
          </div>

          <div id="app-options-mobile">
            <h5>Mobile Application Framework</h5>
            <div>
              <div>
                <input name="app-mobile" type="radio" id="app-mobile-none" value="none" checked />
                <label>No-UI</label>
              </div>
              <div>
                <input name="app-mobile" type="radio" id="app-mobile-react-native" value="react-native" />
                <label>React Native</label>
              </div>
            </div>
          </div>

          <div id="app-options-db">
            <h5>Database Provider</h5>
            <div>
              <div>
                <input name="app-db" type="radio" id="app-db-ef" value="ef" checked />
                <label>Entity Framework Core</label>
              </div>
              <div>
                <input name="app-db" type="radio" id="app-db-mongodb" value="mongodb" />
                <label>MongoDB</label>
              </div>
            </div>
          </div>

          <div id="app-options-extra">
            <h5>Extra Options</h5>
            <div id="app-options-tiered">
              <input id="app-tiered" type="checkbox" />
              <label>Tiered</label>
              <p id="app-tiered-desc">Creates a tiered solution where Web and Http API layers are physically separated. If not specified, it creates a layered solution which is less complex and suitable for most scenarios.</p>
            </div>
            <div id="app-options-separate-identity-server" class="hidden">
              <input id="app-separate-identity-server" type="checkbox" />
              <label>Separate Identity Server</label>
              <p id="app-separate-identity-server-desc">Separates the identity server application from the API host application. If not specified, you will have a single endpoint in the server side.</p>
            </div>

            <label>Abp Version</label>
            <div style="margin-top: .6em;">
              <input id="app-abp-version" class="demo-input" type="text" />
            </div>
            <p id="app-abp-version-desc">Specifies the ABP & template version. It can be a <a href="https://github.com/abpframework/abp/releases">release tag<span class="u-visible-to-screen-reader">(opens in new window)</span></a> or a <a href="https://github.com/abpframework/abp/branches">branch name<span class="u-visible-to-screen-reader">(opens in new window)</span></a>. Uses the latest release if not specified. Most of the times, you will want to use the latest version.</p>

            <label>Template Source</label>
            <div style="margin-top: .6em;">
              <input id="app-template-source" class="demo-input" type="text" />
              <button id="app-template-source-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="app-template-source-desc">Specifies a custom template source to use to build the project. Local and network sources can be used(Like D:\local-template or https://.../my-template-file.zip).</p>

            <input id="app-create-solution-folder" type="checkbox" />
            <label>Create Solution Folder</label>
            <p id="app-create-solution-folder-desc">Specifies if the project will be in a new folder in the output folder or directly the output folder.</p>

            <label>Connection String</label>
            <div style="margin-top: .6em;">
              <input id="app-connection-string" class="demo-input" type="text" />
            </div>
            <p id="app-connection-string-desc">Overwrites the default connection strings in all <b>appsettings.json</b> files. The default connection string is <b>Server=localhost;Database=MyProjectName;Trusted_Connection=True;MultipleActiveResultSets=true</b> for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as <a href="https://github.com/abpframework/abp/blob/dev/docs/en/Entity-Framework-Core-Other-DBMS.md">described here<span class="u-visible-to-screen-reader">(opens in new window)</span></a> (after creating the solution).</p>

            <label>Local Framework Reference</label>
            <div style="margin-top: .6em;">
              <input id="app-abp-path" class="demo-input" type="text" />
              <button id="app-abp-path-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="app-local-framework-ref-desc">Uses local projects references to the ABP framework instead of using the NuGet packages. This can be useful if you download the ABP Framework source code and have a local reference to the framework from your application.</p>
          </div>

          <h5>
            <button class="demo-button" id="app-execute">Execute</button>
          </h5>

          <div id="app-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create a module solution
          <div class="demo-meta u-avoid-clicks">Generate a new module solution through the startup template</div>
        </button>
        <div id="box-abp-cli-new-module" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp new &lt;solution-name&gt; [options]</code></pre>
          <div id="module-project-info">
            <h5>Solution Name</h5>
            <input id="module-solution-name" class="demo-input" type="text" />
            <p id="module-solution-name-desc">Common convention is to name a solution is like YourCompany.YourProject. However, you can use different naming like YourProject (single level namespacing) or YourCompany.YourProduct.YourModule (three levels namespacing).</p>
            
            <h5>Output Folder</h5>
            <input id="module-project-folder" class="demo-input" type="text" />
            <button id="module-project-folder-selectBtn" class="demo-button">Select</button>
            <p id="module-project-folder-desc">Specifies the output folder. Default value is the current directory.</p>
          </div>

          <div id="module-options-extra">
            <h5>Extra Options</h5>
            <div id="module-options-no-ui">
              <input id="module-no-ui" type="checkbox" />
              <label>No-UI</label>
              <p id="module-no-ui-desc">Specifies to not include the UI. This makes possible to create service-only modules (a.k.a. microservices - without UI).</p>
            </div>
        
            <label>Abp Version</label>
            <div style="margin-top: .6em;">
              <input id="module-abp-version" class="demo-input" type="text" />
            </div>
            <p id="module-abp-version-desc">Specifies the ABP & template version. It can be a <a href="https://github.com/abpframework/abp/releases">release tag<span class="u-visible-to-screen-reader">(opens in new window)</span></a> or a <a href="https://github.com/abpframework/abp/branches">branch name<span class="u-visible-to-screen-reader">(opens in new window)</span></a>. Uses the latest release if not specified. Most of the times, you will want to use the latest version.</p>
        
            <label>Template Source</label>
            <div style="margin-top: .6em;">
              <input id="module-template-source" class="demo-input" type="text" />
              <button id="module-template-source-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="module-template-source-desc">Specifies a custom template source to use to build the project. Local and network sources can be used(Like D:\local-template or https://.../my-template-file.zip).</p>
        
            <input id="module-create-solution-folder" type="checkbox" />
            <label>Create Solution Folder</label>
            <p id="module-create-solution-folder-desc">Specifies if the project will be in a new folder in the output folder or directly the output folder.</p>
        
            <label>Connection String</label>
            <div style="margin-top: .6em;">
              <input id="module-connection-string" class="demo-input" type="text" />
            </div>
            <p id="module-connection-string-desc">Overwrites the default connection strings in all <b>appsettings.json</b> files. The default connection string is <b>Server=localhost;Database=MyProjectName;Trusted_Connection=True;MultipleActiveResultSets=true</b> for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as <a href="https://github.com/abpframework/abp/blob/dev/docs/en/Entity-Framework-Core-Other-DBMS.md">described here<span class="u-visible-to-screen-reader">(opens in new window)</span></a> (after creating the solution).</p>
        
            <label>Local Framework Reference</label>
            <div style="margin-top: .6em;">
              <input id="module-abp-path" class="demo-input" type="text" />
              <button id="module-abp-path-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="module-local-framework-ref-desc">Uses local projects references to the ABP framework instead of using the NuGet packages. This can be useful if you download the ABP Framework source code and have a local reference to the framework from your application.</p>
          </div>

          <h5>
            <button class="demo-button" id="module-execute">Execute</button>
          </h5>

          <div id="module-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create a console solution
          <div class="demo-meta u-avoid-clicks">Generate a new console solution through the startup template</div>
        </button>
        <div id="box-abp-cli-new-console" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp new &lt;solution-name&gt; [options]</code></pre>
          <div id="console-project-info">
            <h5>Solution Name</h5>
            <input id="console-solution-name" class="demo-input" type="text" />
            <p id="console-solution-name-desc">Common convention is to name a solution is like YourCompany.YourProject. However, you can use different naming like YourProject (single level namespacing) or YourCompany.YourProduct.YourModule (three levels namespacing).</p>
            
            <h5>Output Folder</h5>
            <input id="console-project-folder" class="demo-input" type="text" />
            <button id="console-project-folder-selectBtn" class="demo-button">Select</button>
            <p id="console-project-folder-desc">Specifies the output folder. Default value is the current directory.</p>
          </div>

          <div id="console-options-extra">
            <h5>Extra Options</h5>
        
            <label>Abp Version</label>
            <div style="margin-top: .6em;">
              <input id="console-abp-version" class="demo-input" type="text" />
            </div>
            <p id="console-abp-version-desc">Specifies the ABP & template version. It can be a <a href="https://github.com/abpframework/abp/releases">release tag<span class="u-visible-to-screen-reader">(opens in new window)</span></a> or a <a href="https://github.com/abpframework/abp/branches">branch name<span class="u-visible-to-screen-reader">(opens in new window)</span></a>. Uses the latest release if not specified. Most of the times, you will want to use the latest version.</p>
        
            <label>Template Source</label>
            <div style="margin-top: .6em;">
              <input id="console-template-source" class="demo-input" type="text" />
              <button id="console-template-source-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="console-template-source-desc">Specifies a custom template source to use to build the project. Local and network sources can be used(Like D:\local-template or https://.../my-template-file.zip).</p>
        
            <input id="console-create-solution-folder" type="checkbox" />
            <label>Create Solution Folder</label>
            <p id="console-create-solution-folder-desc">Specifies if the project will be in a new folder in the output folder or directly the output folder.</p>
        
            <label>Connection String</label>
            <div style="margin-top: .6em;">
              <input id="console-connection-string" class="demo-input" type="text" />
            </div>
            <p id="console-connection-string-desc">Overwrites the default connection strings in all <b>appsettings.json</b> files. The default connection string is <b>Server=localhost;Database=MyProjectName;Trusted_Connection=True;MultipleActiveResultSets=true</b> for EF Core and it is configured to use the SQL Server. If you want to use the EF Core, but need to change the DBMS, you can change it as <a href="https://github.com/abpframework/abp/blob/dev/docs/en/Entity-Framework-Core-Other-DBMS.md">described here<span class="u-visible-to-screen-reader">(opens in new window)</span></a> (after creating the solution).</p>
        
            <label>Local Framework Reference</label>
            <div style="margin-top: .6em;">
              <input id="console-abp-path" class="demo-input" type="text" />
              <button id="console-abp-path-selectBtn" class="demo-button">Select</button>
            </div>
            <p id="console-local-framework-ref-desc">Uses local projects references to the ABP framework instead of using the NuGet packages. This can be useful if you download the ABP Framework source code and have a local reference to the framework from your application.</p>
          </div>

          <h5>
            <button class="demo-button" id="console-execute">Execute</button>
          </h5>

          <div id="console-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/abp-cli/abp-cli-new-app.js')
      require('./renderer-process/abp-cli/abp-cli-new-module.js')
      require('./renderer-process/abp-cli/abp-cli-new-console.js')
    </script>

  </section>
</template>
